<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Custom Accordion</title>

    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

    <link rel="stylesheet" href="accordion-style.css">

</head>
<body>

    <div class="accordion">

        <input type="checkbox" name="accordion" id="item-1">
        <label for="item-1" class="accordion-item item-1">
            <div class="accordion-head">
                <ion-icon name="megaphone" class="accordion-icon"></ion-icon>
                <h3 class="accordion-title">Announcements</h3>
                <ion-icon name="chevron-down-outline" class="accordion-icon item-1 arrow-icon"></ion-icon>
            </div>
            <div class="accordion-body">
                <p class="accordion-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima amet placeat eum quis explicabo? Harum inventore quia necessitatibus sed tempora quam deserunt dolorem nam, quis cumque non aperiam sunt! Magni.</p>
            </div>
        </label>

        <input type="checkbox" name="accordion" id="item-2">
        <label for="item-2" class="accordion-item item-2">
            <div class="accordion-head">
                <ion-icon name="card" class="accordion-icon"></ion-icon>
                <h3 class="accordion-title">Payment Details</h3>
                <ion-icon name="chevron-down-outline" class="accordion-icon item-2 arrow-icon"></ion-icon>
            </div>
            <div class="accordion-body">
                <p class="accordion-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima amet placeat eum quis explicabo? Harum inventore quia necessitatibus sed tempora quam deserunt dolorem nam, quis cumque non aperiam sunt! Magni.</p>
            </div>
        </label>

        <input type="checkbox" name="accordion" id="item-3">
        <label for="item-3" class="accordion-item item-3">
            <div class="accordion-head">
                <ion-icon name="shield-checkmark" class="accordion-icon"></ion-icon>
                <h3 class="accordion-title">Security</h3>
                <ion-icon name="chevron-down-outline" class="accordion-icon item-3 arrow-icon"></ion-icon>
            </div>
            <div class="accordion-body">
                <p class="accordion-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima amet placeat eum quis explicabo? Harum inventore quia necessitatibus sed tempora quam deserunt dolorem nam, quis cumque non aperiam sunt! Magni.</p>
            </div>
        </label>

        <input type="checkbox" name="accordion" id="item-4">
        <label for="item-4" class="accordion-item item-4">
            <div class="accordion-head">
                <ion-icon name="alert-circle" class="accordion-icon"></ion-icon>
                <h3 class="accordion-title">About</h3>
                <ion-icon name="chevron-down-outline" class="accordion-icon item-4 arrow-icon"></ion-icon>
            </div>
            <div class="accordion-body">
                <p class="accordion-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima amet placeat eum quis explicabo? Harum inventore quia necessitatibus sed tempora quam deserunt dolorem nam, quis cumque non aperiam sunt! Magni.</p>
            </div>
        </label>

    </div>

    <p id="logo">
        <span>~Github:</span> @lordsid003
    </p>

</body>
</html>